<template>
  <div>
    <h6>用户详情:</h6>
    <ul>
      <li v-for="(val,key,index) in user" :key="index">
        <strong>{{key}}</strong>:<strong>{{val}}</strong>
      </li>
    </ul>
  </div>
</template>

<script>
  const users = [
    {id:0,name:"damu",age:18},
    {id:1,name:"zdy",age:17},
    {id:2,name:"laofu",age:11}
  ]
  export default {
    name: "userDetail",
    props:["id"],
    data(){
      return {
        user:{}
      }
    },
    watch:{
      id:{
        handler(newID){
            //let id = +this.$route.params.id;
            this.user = users.filter(user=>user.id === +newID)[0]
        },
        deep:true,
        immediate:true
      }
    }
  }
</script>

<style scoped>

</style>